<template>
	<view class="login">
		<view class="form">
			<image class="logo" src="/static/logo.png" mode="widthFix"></image>
			<view class="tips">需要获取您的手机号</view>
			<button class="cu-btn login-btn" open-type="getPhoneNumber" @getphonenumber="phoneChange">允许</button>
		</view>
	</view>
</template>

<script setup>
	import {
		inject
	} from 'vue'
	import {
		doRegister
	} from '@/apis/user.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	const useStore = useAppsStore()
	const {
		getPid: pid,
	} = storeToRefs(useStore)
	const {
		setToken
	} = useStore
	const $back = inject('$back')
	const phoneChange = async (e) => {
		const params = {
			phoneCode: e.target.code,
		}
		params.loginCode = await getCode()
		params.superiorUserId = pid.value
		const data = await doRegister(params)
		if (!data) return
		setToken(data.token).then(() => {
			$back()
		})
	}

	const getCode = () => {
		return new Promise((rel, rej) => {
			uni.login({
				success(e) {
					rel(e.code)
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
	.login {
		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 8vh;

			.logo {
				width: 200rpx;
				height: auto;
				border-radius: 20rpx;
			}

			.tips {
				margin-top: 15rpx;
				color: gray;
				font-size: 26rpx;
			}

			.login-btn {
				margin-top: 80rpx;
				width: 650rpx;
				height: 80rpx;
				background-color: #FFC434;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
		}
	}
</style>